<template>
  <div>
    <canvas id="canvas" style="width:130px;"></canvas>
    <div>
      <div>
        <el-table :data="data" ref="multipleTable">
          <el-table-column type="selection"></el-table-column>
          <el-table-column   prop="id" label="序号"></el-table-column>
          <el-table-column  prop="name" label="名字"></el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination
        background
        :layout="pageLayout || 'slot, prev, pager, next, jumper'"
        :page-size="pageSizeData"
        :total="total"
        @current-change="pageChangeHandler"
        :current-page="pageIndex"
      >
        <span class="pagitnation_info" style="margin-right: 20px;">
          总计: {{ total }},
          <span v-if="true">
            每页显示:
            <el-select
              popper-class="pagitnation_size_select"
              class="pagitnation_size"
              v-model="pageSizeData"
              @change="pageSizeChange"
            >
              <el-option :label="10" :value="10" />
              <el-option :label="15" :value="15" />
              <el-option :label="20" :value="20" />
            </el-select>
          </span>
          共 {{ Math.ceil(total / pageSizeData) }} 页
          本页
          {{ (pageIndex - 1) * pageSizeData + 1 + '-' + (pageIndex === Math.ceil(total / pageSizeData) ? total : pageIndex * pageSizeData) }}
          条
        </span>
      </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
// 表格分页 分两部分 一个是查询条件发送写死当前页与页数 一个是分页页数触发发送
// 相同的都是条件 不同的是一个写死 一个动态g
import Captcha from "captcha-mini"
export default {
  data() {
    return {
      cap: {
        lineWidth: "",
        lineNum: "",
        dotR: 2,
        dotNum: "",
        preGroundColor: [10,80],
        backGroundColor: [150,250],
        fontSize: 60,
        fontFamilt: ["Georgia","微软雅黑","Helvetica","Arial"],
        fontStyle: "stroke", // file stroke 字体绘制
        content: "1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM",
        length: 4 // 验证长度
      },
      arr: [1,2,3,4],
      pageIndex: 1,
      data: [
        {
          id: 1,name: "1"
        },{
          id: 2,name: "1"
        },{
          id: 3,name: "1"
        },{
          id: 4,name: "1"
        }
      ],
      total: 10,
      pageSizeData: 1
    }
  },
  methods: {
    pageChangeHandler(val) {
      console.log(val)
    },
    sizeChange(val) {
      console.log(val)
    }
  },
  mounted() {
    this.$refs.multipleTable.toggleRowSelection(this.data[2])
    let captchal = new Captcha(this.cap)
    captchal.draw(document.querySelector("#canvas"),(r)=>{
      console.log(r,"验证码")
      this.$emit("but",r)
    })
  }
}
</script>

<style>

</style>